<template>
    <div class="container">
       <div class="bar">
           <el-date-picker
                   v-model="TimeValue"
                   align="left"
                   type="date"
                   placeholder="选择日期"
                   @change="pickTimeHandle()"
                   :picker-options="pickerOptions">
           </el-date-picker>
           <el-button class="bar-btn" @click="SearchHandle" type="primary">查询</el-button>
       </div>
        <div class="table">
            <template>
                <el-table border :data="tableData"
                          fit
                          el-tabl
                          v-loading="loading"
                          stripe style="width: 100%">
                    <el-table-column align='center' prop="statisticalTime" label="日期"></el-table-column>
                    <el-table-column align='center' prop="departmentName" label="部门名称"></el-table-column>
                    <el-table-column align='center' prop="totalAreaCompanyNum" label="企业总数（家）"></el-table-column>
                    <el-table-column align='center' prop="totalActiveCompanyNum" label="激活企业总数（家）"></el-table-column>
                    <el-table-column align='center' prop="totalDeclareCompanyNum" label="申报企业总数（家）"></el-table-column>
                    <el-table-column align='center' prop="totalHandOrderNum" label="在手订单总数（笔）"></el-table-column>
                    <el-table-column align='center' prop="totalHandOrderAmountMy" label="在手订单总金额（美元）"></el-table-column>
                    <el-table-column align='center' prop="totalDeliverOrderNum" label="出货订单总数（笔）"></el-table-column>
                    <el-table-column align='center' prop="totalDeliverOrderMoneyMy" label="出货订单总金额（美元）"></el-table-column>
                </el-table>
                <div class='pagination-container'>
                    <el-pagination
                            background
                            layout='total, prev, pager, next'
                            :total='total'
                            :page-count='count'
                            :page-size='size'
                            :current-page='pageCurrent'
                            @current-change='handleCurrentChange'
                    ></el-pagination>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
    import {getDataList} from '@/api/company_list';
    export default {
        data(){
            return{
                loading:true,
                total: 0,
                count: 0,
                pageCurrent: 1,
                size: 10,
                currentPage1: 5,
                currentPage2: 5,
                currentPage3: 5,
                currentPage4: 4,
                TimeValue:'',
                tableData: [],
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '前天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 *2);
                            picker.$emit('pick', date);
                        }
                    }]
                },
            }
        },
        created(){
            this.getDataListFn('1')

        },
        methods:{
            fn(){
                this.getDataListFn(1);
            },
            // 当前的页码，改变时会触发
            handleCurrentChange: function(currentPage) {
                this.getDataListFn(currentPage);
            },
            getDataListFn(currentPage){
                this.loading= true;
                let statisticalTime =this.TimeValue;

                console.log(statisticalTime)
                getDataList(statisticalTime,currentPage).then(res=>{
                    let that = this;
                    this.tableData= res.data;
                    var pageData = res.page;
                    that.total = pageData.resultCount;
                    that.count = pageData.pageCount;
                    that.pageCurrent = pageData.pageCurrent;
                    that.size = pageData.pageLimit;
                    that.loading=false;
                    console.log(res)
                })

            },
            SearchHandle(){
                this.getDataListFn(1);
            },
            toDuble(n){
                if(n<10){
                    return "0"+n;
                }else {
                    return ""+n
                }
            },
            pickTimeHandle(){
                if(this.TimeValue){
                    this.TimeValue = `${this.TimeValue.getFullYear()}-${this.toDuble(this.TimeValue.getMonth()+1)}-${this.toDuble(this.TimeValue.getDate())}`
                }

              /*  let y = this.TimeValue.getFullYear()
                let m = this.toDuble(this.TimeValue.getMonth()+1)
                let d = this.toDuble(this.TimeValue.getDate())*/


            }
        }
    }
</script>
<style scoped>
    .table{
        margin: 20px;
    }
    .bar{
        margin: 20px;
    }
    .bar-btn{
        margin-left: 20px;
    }
</style>